<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入 
* G6 (https://github.com/antvis/G6)
*********************************************************************-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title data-i18n="resources.title_l7_floating_map"></title>
    <script type="text/javascript" include="jquery" src="../js/include-web.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100vh;
        overflow: hidden;
      }
      #map {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>
    <script type="text/javascript" include="mapbox-gl-enhance,L7" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <script type="text/javascript">
      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
      var attribution =
        "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
        " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";

      var tileURL = host + '/iserver/services/map-china/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}';
      var map = new mapboxgl.Map({
        container: 'map',
        style: {
          version: 8,
          sources: {
            'raster-tiles': {
              attribution: attribution,
              type: 'raster',
              tiles: [tileURL],
              tileSize: 256
            }
          },
          layers: [
            {
              id: 'simple-tiles',
              type: 'raster',
              source: 'raster-tiles',
              minzoom: 0,
              maxzoom: 22
            }
          ]
        },
        center: [120, 29.732983],
        zoom: 6.2,
        pitch: 60
      });

      map.on('load', function () {
        let lineDown, lineUp, textLayer, provincelayer;
        Promise.all([
          fetch('https://iclient.supermap.io/web/data/L7/ecd1aaac-44c0-4232-b66c-c0ced76d5c7d.json').then((d) => d.json()),
          fetch('https://iclient.supermap.io/web/data/L7/d434cac3-124e-4922-8eed-ccde01674cd3.json').then((d) => d.json())
        ]).then(function onLoad([data, data1]) {
          const texts = [];
          data.features.map((option) => {
            const { name, center } = option.properties;
            const [lng, lat] = center;
            texts.push({ name, lng, lat });
            return '';
          });
          lineDown = new mapboxgl.supermap.L7Layer({ type: 'LineLayer' });
          lineDown.getL7Layer().source(data).shape('line').color('#0DCCFF').size(1).style({
            raisingHeight: 200000
          });

          lineUp = new mapboxgl.supermap.L7Layer({ type: 'LineLayer' });
          lineUp
            .getL7Layer()
            .source(data)
            .shape('line')
            .color('#0DCCFF')
            .size(1)
            .style({
              raisingHeight: 200000 + 150000
            });

          textLayer = new mapboxgl.supermap.L7Layer({ type: 'PointLayer' });
          textLayer
            .getL7Layer()
            .source(texts, {
              parser: {
                type: 'json',
                x: 'lng',
                y: 'lat'
              }
            })
            .shape('name', 'text')
            .size(14)
            .color('#0ff')
            .style({
              textAnchor: 'center',
              spacing: 2,
              padding: [1, 1],
              stroke: '#0ff',
              strokeWidth: 0.2,
              raisingHeight: 200000 + 150000 + 10000,
              textAllowOverlap: true
            });
          const lineLayer = new mapboxgl.supermap.L7Layer({ type: 'LineLayer' });
          lineLayer.getL7Layer().source(data1).shape('wall').size(80).style({
            heightfixed: true,
            opacity: 0.6,
            sourceColor: '#0DCCFF',
            targetColor: 'rbga(255,255,255, 0)'
          });

          provincelayer = new mapboxgl.supermap.L7Layer({ type: 'PolygonLayer' });
          provincelayer
            .getL7Layer()
            .source(data1)
            .size(150)
            .shape('extrude')
            .color('#0DCCFF')
            .active({
              color: 'rgb(100,230,255)'
            })
            .style({
              heightfixed: true,
              pickLight: true,
              raisingHeight: 200000,
              opacity: 0.8
            });

          provincelayer.getL7Layer().on('mousemove', () => {
            provincelayer.getL7Layer().style({
              raisingHeight: 200000 + 100000
            });
            lineDown.getL7Layer().style({
              raisingHeight: 200000 + 100000
            });
            lineUp.getL7Layer().style({
              raisingHeight: 200000 + 150000 + 100000
            });
            textLayer.getL7Layer().style({
              raisingHeight: 200000 + 150000 + 10000 + 100000
            });
          });

          provincelayer.getL7Layer().on('unmousemove', () => {
            provincelayer.getL7Layer().style({
              raisingHeight: 200000
            });
            lineDown.getL7Layer().style({
              raisingHeight: 200000
            });
            lineUp.getL7Layer().style({
              raisingHeight: 200000 + 150000
            });
            textLayer.getL7Layer().style({
              raisingHeight: 200000 + 150000 + 10000
            });
          });
          map.addLayer(lineDown);
          map.addLayer(lineUp);
          map.addLayer(lineLayer);
          map.addLayer(provincelayer);
          map.addLayer(textLayer);
        });
      });
    </script>
  </body>
</html>
